import React, { memo, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import style from "./index.module.scss";
import axios from "@/utils/axios";
import medicineInterface from "@/Type/git";
import { NavBar } from "react-vant";

const Index = memo(() => {
  const {
    state: { item },
  } = useLocation();

  const jump = useNavigate();
  const [backgroundbox, setbackgroundbox] = React.useState("");
  const [data, setdata] = React.useState([]);
  useEffect(() => {
    if (item.title === "秒杀专场") {
      setbackgroundbox("ms");
      axios.get("/ms").then(({ data: { list1 } }) => {
        setdata(list1);
      });
    } else if (item.title === "健康生活") {
      setbackgroundbox("jiankang");
      axios.get("/jiankang").then(({ data: { list } }) => {
        setdata(list);
      });
    } else if (item.title === "护肤专场") {
      setbackgroundbox("hufu");
      axios.get("/hufu").then(({ data: { list2 } }) => {
        setdata(list2);
      });
    }
  }, []);

  return (
    <div>
      <NavBar
        leftText="返回"
        className={style.rvnavbar__content}
        onClickLeft={() => jump(-1)}
      />
      {item.classname === "lc" ? (
        <>
          <div className={style.lcimg}>
            <img src={item.background} />
          </div>
          {/* 项目介绍 */}
          <div className={style.main}>
            <div className={style.opticbox}>
              <div className={style.ProjectIntroduction}></div>
            </div>
          </div>
        </>
      ) : (
        <>
          <div className={style.img}>
            <img src={item.background} alt="" />
          </div>

          <div className={style[backgroundbox]}>
            <div className={style.titlebut}>
              <button>{item.title}</button>
            </div>

            <div className={style.listevent}>
              {data.map((item: medicineInterface) => {
                return (
                  <div
                    key={item.id}
                    onClick={() => {
                      jump("/jkshop/detail:item", { state: { item } });
                    }}
                  >
                    <img src={item.img} alt="" />
                    <p>{item.desc}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      )}
    </div>
  );
});

export default Index;
